<template>
  <div>
    <div><span class="title1">购物车</span></div>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div v-for="item in list" :key="item.goods_id" class="list">
        <input type="checkbox" v-model="buy" :value="item.goods_id" class="radio">
        <van-card
          :price="item.goods_price * item.goods_count"
          :title="item.goods_name"
          :thumb="item.goods_img"
        />
        <van-stepper v-model="item.goods_count" class="stepper" />
      </div>
   


    <!-- 底部 -->
    <div class="footer">
      <van-submit-bar :price="total" decimal-length=2 button-text="提交订单" @submit="onSubmit">
  <van-checkbox v-model="isCheckedAll" @click="isCheckAll">全选</van-checkbox>
  <template #tip>
    你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
  </template>
</van-submit-bar>
    </div>
     </van-list>
  </div>
</template>

<script>
import Vue from "vue";
import { Card } from "vant";
import { List } from "vant";
import uri from "@/config/uri";
import { Stepper } from "vant";
import { Checkbox, CheckboxGroup, Dialog,Toast} from "vant";
import { SubmitBar } from 'vant';

var moment = require('moment');

Vue.use(SubmitBar);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Stepper);
Vue.use(List);
Vue.use(Card);
Vue.use(Toast);
Vue.use(Dialog);
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      isCheckedAll:false,
      buy:[],
      _oid:'',
    };
  },
  computed:{
    total(){
      //累计商品小计
      let sum = 0;
      this.list.forEach((el) =>{
        if(this.buy.includes(el.goods_id)){

          sum += el.goods_price * el.goods_count

        }
      });
    
      return sum*100;
    }
  },
 
  methods: {
    onLoad() {
      console.log(uri.getMock);
      // 异步更新数据
      this.$http.get(uri.getMock).then((ret) => {
  
        //  console.log(ret);
        this.list = [...this.list, ...ret.cartInfo];
        this.finished = true;
        // 加载状态结束
        // this.loading = false;
        // 数据全部加载完成
        // if (this.pageNum < maxPageNum) {
        //   this.pageNum++
        // }else{
        //    this.finished = true;
        // }
      });
    },
    onSubmit(){
      var year = moment().get('year')+'';
      var month = moment().get('month');
      month = month < 10 ? "0" + month : month;
      var date = moment().get('date');
      date = date < 10 ? "0" + date : date;
      var hour = moment().get('hour');
      hour = hour < 10 ? "0" + hour : hour;
      var minute = moment().get('minute');
      minute = minute < 10 ? "0" + minute : minute;
      var second = moment().get('second');
      second = second < 10 ? "0" + second : second;

      var iTime = year + month + date + hour + minute + second

      this._oid = iTime
      let subject = "Vue购物车练习(邓文斌)";
      window.open(
        `https://m.28sjw.com/alipay_wap/alipayapi.php?WIDout_trade_no=${iTime}&WIDsubject=${subject}&WIDtotal_fee=${this.total}`
      );
      Dialog.confirm({
        title: "支付成功？",
        message: "如果您已经支付成功，请点击确定。",
      })
        .then(() => {
          this.$http
            .get(
              "https://m.28sjw.com/order/orderPayStatusCheck.php?_oid="+this._oid
            )
            .then((ret) => {
              if (ret.data.order_status == 1) {
                Toast.success("付款成功！");
              } else {
                Toast.fail("付款失败！");
              }
            });

          //在这里发起验证请求
        })
        .catch(() => {
           Toast.fail("取消支付！");
        });
    },
    onClickEditAddress(){
      console.log(2);
    },
    isCheckAll(){
      this.buy = [];
      if(this.isCheckedAll){
        this.list.forEach(el =>{
          this.buy.push(el.goods_id);
        })
      }
    }
  },
    //监听data中数据的变化
   watch:{
    buy:function(){

      this.isCheckedAll = this.buy.length === this.list.length
    }
  },
};
</script>
<style scoped>
.title1 {
  margin-left: 150px;
}
.stepper {
  position: relative;
  top: -40px;
  margin-left: 200px;
  z-index: 1000;
}
.list {
  height: 120px;
  margin-left: 40px;
}
.radio {
  position: relative;
  top: 70px;
  z-index: 99999;
  left: -30px;
  
}
</style>